<template>
  <div id="index">
    <div id="index_container"></div>
    <div id="main">
      <a href="" id="logo"></a>
      <div class="title_e">
        <div class="title_e_box">
          <div class="homyit">HOMYIT</div>
          <div class="studio">STUDIO</div>
        </div>
      </div>
      <div class="title_c">
        <div class="homyit_box">
          <div class=stage>
            <div>
              <div class="hong font">宏</div>
              <div class="yi font">奕</div>
            </div>
            <div>
              <div class="gong font">工</div>
              <div class="zuo font">作</div>
              <div class="shi font">室</div>
            </div>
          </div>
        </div>
      </div>
      <div class="time">
        <div>2013 </div>
        <div class="time_line"></div>
        <div>2019</div>
      </div>
      <!-- 这里是一个时间组件 -->

      <div class="index_bottom">start to explore</div>
    </div>
  </div>
</template>

<script>
  //对象输出
  export default {
    name: 'Index',
    methods: {
      animationStart() {
        this.containerBacAnim();
        setTimeout(() => {
          var imgs = document.querySelectorAll('.img_slice')
          var imgLength = imgs.length;
          for (let i = 0; i < imgLength; i++) {
            imgs[i].style.transform = ''
          }
          //注意这个组合动画1.5秒搞完
          setTimeout(this.homyitFontS, 1500)
        }, 0)
      },
      //渲染切片
      containerBacAnim() {
        var squireHeight = 2.5 //vh
        var squireWidth = 5 //vw
        var line = 100 /squireHeight // 10行
        var clone = 100 /squireWidth //10列
        var boxLine //每行的盒子 img_slice_box
        var box // 每个盒子
        var positionX, positionY, randX, randY //盒子背景位置
        //获取最外层container
        var indexContainer = document.getElementById('index_container')

        //虚拟的文档集合
        var virtualContainer = document.createDocumentFragment()

        for (let i = 0; i < line; i++) {
          //初始化 列 二维数组
          //创建行盒子
          boxLine = document.createElement('div')
          boxLine.classList.add('img_slice_box')
          for (let j = 0; j < clone; j++) {
            //背景图片位置
            positionX = -squireWidth * j
            positionY = -squireHeight * i
            //随机位置(定位)
            randX = this.randPositon(positionX, positionY).x
            randY = this.randPositon(positionX, positionY).y
            //创建小盒子
            box = document.createElement('div')
            //添加类名
            box.className = 'img_slice'
            //添加样式
            box.style.cssText = `
              height: ${squireHeight}vh;
              width: ${squireWidth}vw;
              transform: translate(${randX}vw, ${randY}vh);
              background-position: ${positionX}vw ${positionY}vh;
            `
            //将小盒子插入行盒子
            boxLine.appendChild(box)
          }

          //把行盒子插入 虚拟的文档集合
          virtualContainer.appendChild(boxLine)
        }
        //渲染虚拟文档树
        indexContainer.appendChild(virtualContainer)
      },
      //位置随机函数
      randPositon(positionX, positionY) {
        var flagX = (Math.random() * 1 - 0.5) > 0 ? 1 : (-1)
        var flagY = (Math.random() * 1 - 0.5) > 0 ? 1 : (-1)
        var ranX = flagX * (Math.floor(Math.random() * 20) * 5)
        var randY = flagY * (Math.floor(Math.random() * 20) * 10)
        return {
          x: ranX,
          y: randY
        }
      },
      //宏奕文字动画处理
      homyitFontS() {
        //获取到上层页面定时渲染
        var main = document.getElementById('main')
        var titleE = document.querySelectorAll('.title_e_box>div');
        //处理整个界面的出现
        main.style.opacity = '1'
        //文字动画效果
        var fonts = document.getElementsByClassName('font')
        for (let i = 0; i < fonts.length; i++) {
          fonts[i].className = 'font'
        }
        titleE[0].style.transform = 'rotateX(10deg)'
        titleE[1].style.transform = 'rotateX(-10deg)'
      }
    },
    mounted() {
      this.animationStart();
    }
  }

</script>


<style src="@STATIC/css/index.css" />
